{% extends "base.html" %}

{% block head %}
    <style>
        :root {
            --primary-color: #1976d2;
            --primary-hover: #1565c0;
            --border-color: #e0e0e0;
            --light-gray: #f5f5f5;
            --text-color: #333;
            --shadow-color: rgba(0, 0, 0, 0.1);
        }

        body {
            color: var(--text-color);
            background-color: #f8f9fa;
        }
        .ConfigureSearchParameters {
            min-width: 800px;
            margin: 0 auto;
        }

        .ConfigureSearchParameters .cardHeaderDiv {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .cardHeaderDiv .card-header {
            background: var(--light-gray);
            border-radius: 8px 8px 0 0;
            padding: 15px 20px;
            width: 100%;
        }

        .card-header h2 {
            margin: 0;
            font-size: 1.5rem;
            color: #212332;
        }

        .card-header .card-header_text {
            font-size: 12px;
            font-weight: 400;
            color: #808080;
        }

        .cardHeaderDiv .card-header_baochun {
            width: 144px;
            height: 32px;
            border-radius: 3px;
            background: #000000;
            font-size: 20px;
            font-weight: 400;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            word-spacing: 24px;
            cursor: pointer;
            margin-left: 20px;
        }

        .ConfigureSearchParameters .card_input {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }

        .card_input .card_iptDiv{
            width: 176px;
            height: 39px;
        }

        .card_input .card_iptDiv input{
            width: 100%;
            height: 100%;
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            background: rgba(0, 0, 0, 0.05);
            border: 1px solid #ddd;
            padding: 10px 15px;
            border-radius: 5px;
            transition: all 0.3s;
        }

        .card_input .card_iptDiv input:focus {
            outline: none;
            border-color: var(--primary-color);
            background: white;
        }

        .card_input .card_iptTit{
            font-size: 20px;
            font-weight: 500;
            color: #000000;
            cursor: pointer;
        }

        .card_input .card_iptTit:hover {
            color: var(--primary-hover);
        }
        }

        .card_input .card_iptTit:hover {
            background-color: var(--primary-hover);
        }

        .InstitutionalDocuments {
            margin-top: 30px;
            overflow: hidden;
        }

        .InstitutionalDocumentsTit {
            font-size: 16px;
            font-weight: 400;
            color: rgba(98, 129, 205, 1);
            margin-top: 10px;
            cursor: pointer;
        }

        .InstitutionalDocumentsTit:last-child {
            border-bottom: none;
        }

        .InstitutionalDocumentsTit:hover {

        }

        .InstitutionalDocumentsTit a {
            font-size: 15px;
            font-weight: 400;
            color: var(--text-color);
            text-decoration: none;
            display: block;
        }

        .InstitutionalDocumentsTit a:hover {
            color: var(--primary-color);
        }

        .no-results {
            padding: 20px;
            text-align: center;
            color: #666;
            font-style: italic;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="ConfigureSearchParameters">
        <div class="cardHeaderDiv">
            <div class="card-header">
                <h2>制度文件</h2>
            </div>
            <div class="card-header_baochun">保 存</div>
        </div>
        <div class="card_input">
            <div class="card_iptDiv">
                <input id="searchInput" placeholder="输入关键字检索..." type="text">
            </div>
            <div class="card_iptTit" id="searchButton">查询</div>
        </div>
        <div class="InstitutionalDocuments" id="documentsContainer">
            <div class="InstitutionalDocumentsTit">
                <a href="/Institutional-documents-details?id=1">1、CXHBYT 0106-2021业务招待管理程序</a>
            </div>
            <div class="InstitutionalDocumentsTit">
                <a href="/Institutional-documents-details?id=2">2、ZYHBYT 040106-2021职工教育经费管理办法</a>
            </div>
            <div class="InstitutionalDocumentsTit">
                <a href="/Institutional-documents-details?id=3">3、ZYHBYT 040110-2025差旅费管理办法</a>
            </div>
            <div class="InstitutionalDocumentsTit">
                <a href="/Institutional-documents-details?id=4">4、华北财〔2025〕27号 华北油田公司2025年财务预算管理办法</a>
            </div>
            <div class="InstitutionalDocumentsTit">
                <a href="/Institutional-documents-details?id=5">5、华北财函〔2025〕1号 华北油田公司机关2025年财务管理办法</a>
            </div>
            <div class="InstitutionalDocumentsTit">
                <a href="/Institutional-documents-details?id=6">6、五项费用报销管理手册 （2020）</a>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('searchInput');
            const searchButton = document.getElementById('searchButton');
            const documentsContainer = document.getElementById('documentsContainer');
            const documentItems = documentsContainer.querySelectorAll('.InstitutionalDocumentsTit');

            // 搜索函数
            function performSearch() {
                const searchTerm = searchInput.value.toLowerCase().trim();
                let hasResults = false;

                if (searchTerm === '') {
                    // 如果搜索框为空，显示所有项目
                    documentItems.forEach(item => {
                        item.style.display = 'block';
                    });
                    return;
                }

                // 遍历所有文档项
                documentItems.forEach(item => {
                    const link = item.querySelector('a');
                    const text = link.textContent.toLowerCase();

                    // 检查是否包含搜索词
                    if (text.includes(searchTerm)) {
                        item.style.display = 'block';
                        hasResults = true;
                    } else {
                        item.style.display = 'none';
                    }
                });

                // 如果没有结果，显示提示
                if (!hasResults) {
                    // 检查是否已经存在无结果提示
                    let noResults = documentsContainer.querySelector('.no-results');
                    if (!noResults) {
                        noResults = document.createElement('div');
                        noResults.className = 'no-results';
                        noResults.textContent = '没有找到匹配的制度文件';
                        documentsContainer.appendChild(noResults);
                    }
                    noResults.style.display = 'block';
                } else {
                    // 如果有结果，隐藏无结果提示
                    const noResults = documentsContainer.querySelector('.no-results');
                    if (noResults) {
                        noResults.style.display = 'none';
                    }
                }
            }

            // 点击搜索按钮
            searchButton.addEventListener('click', performSearch);

            // 按回车键搜索
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });

            // 输入时实时搜索（可选，如果不需要可以移除）
            // searchInput.addEventListener('input', performSearch);
        });
    </script>
{% endblock %}